<template>

    <!-- vue3 的template模版部分 可以省略 根元素的div -->
    <ul>

      <li v-for="item in cartList" >{{item.name}}==={{item.price}}</li>


    </ul>
    <h1>{{name}}</h1>
     <button @click="sendRow">子传父</button>
     <hr>
     <slot name="content"></slot>
     <slot name="footer"></slot>
</template>
<script>
import {ref,computed} from 'vue'
export default {
   props:{ //设计的父传子
     cartList:{
      type:Array,
      default:()=>[]
     }
   },
   setup(props,context){ //非语法糖写法
    // setup的俩个参数 第一个参数是props 第二个参数是context
    // 第一个参数是props 接受父传子的数据的

    // vue3的setup中的非语法糖 使用props.属性
     console.log(props.cartList,"父传子的数据")

    // context 是一个对象 
    // context.attrs  接受父传子的所有数据 除props之外
    console.log(context.attrs,"---除props之外的父传子数据-------")
    let name=computed(()=>context.attrs.myname)
    // context.emit  //子传父的方法
    let row=ref({
      name:"ipone16promax",
      price:10000,
      color:"红色"
    })

    let sendRow=()=>{
       context.emit("send",row.value)
    }
    // context.slots 获取父组件给子组件传递的插槽内容
     console.log(context.slots,"获取到的插槽内容-------")
   let myCarName=ref("迈巴赫s680");

    // context.expose  // 子组件暴露给父组件的方法
    let sayHi=()=>{
      console.log("调用了子组件的方法")
    } 
 
    
    return {
      name,
      sendRow,
      sayHi,
      myCarName
    }
     
   }
}
</script>
<style lang="less">
  
</style>